<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<script th:inline="javascript">
/*<![CDATA[*/
	$(function() {
	    middlegroup.admin.menu[[${OP.menuId}]].save = function(obj) {
            //获取选中的值
            var selectData = $('#transferContainer').transfer('getData', 'selectData');
            var selectCode = '';
            var unselectCode = '';
            Object.keys(selectData).forEach(function (key) {
                selectCode += selectData[key].code + ",";
            });
            selectCode=(selectCode.substring(selectCode.length-1)==',')?selectCode.substring(0,selectCode.length-1):selectCode;

            $('#selectCode').attr("value", selectCode);
            var unselectData = $('#transferContainer').transfer('getData', 'unselectData');
            Object.keys(unselectData).forEach(function (key) {
                unselectCode += unselectData[key].code + ",";
            });

            unselectCode=(unselectCode.substring(unselectCode.length-1)==',')?unselectCode.substring(0,unselectCode.length-1):unselectCode;
            $('#unselectCode').attr("value", unselectCode);
	  		if($("#menu[[${OP.menuId}]]Form").valid()){
		  		middlegroup.ajaxJson({url:"/op_save_[[${OP.menuId}]]",data:$('#menu[[${OP.menuId}]]Form').serializeArray()},function(){
		  			middlegroup.closeWindow();
					$('#admin_menu[[${OP.menuId}]]_datagrid').bootstrapTable('refresh');
	    		});
	  		}
		};
        $('#transferContainer').transfer({
            titles: ['待选商户', '已选商户'],
            search: true,
            uniqueId: 'code', //唯一id
            type: 'post',
            maxSelect: 20,
            diffKey: 'flag',
            unselectColumns: [{
                field: 'flag',
                checkbox: true
            }, {
                field: 'name',
                title: '商户名称'
            }]
        });
        changeData();
	});
	
/*]]>*/
function changeData() {
    var code = $("#role_code").val();
    $.ajax({
        url: [[${MENU.channel}]] + '/getRoleMerchants' + "?code=" + code,
        success: function (json) {
            $('#transferContainer').transfer('refresh', json);
        }
    });

}
</script>
<div class="ibox float-e-margins animated fadeInRight">
	<div class="ibox-content">
		<form class="form-horizontal m-t required-validate" th:id="@{menu{menuId}Form(menuId=${OP.menuId})}" method="POST" >
			<input type="hidden" name="id" th:value="${dto?.id}" />
			<input type="hidden" id="selectCode" name="selectCodes">
			<input type="hidden" id="unselectCode" name="unselectCodes">
			<div class="form-group">
				<label class="col-sm-3 control-label">角色名称：</label>
				<div class="col-sm-8">
					<input name="name" class="form-control" th:value="${dto?.name}"
						validate="{required:true,messages:{required:'请填写名称'}}" type="text"/>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">角色代码：</label>
				<div class="col-sm-8">
					<input name="code" class="form-control" id="role_code" th:readonly="${null != dto?.id}" th:value="${dto?.code}"
						validate="{required:true,messages:{required:'请填写代码'}}" />
				</div>
				<!--<div class="col-sm-8" th:if="${dto?.id}">
					<span style="display: block; margin-top: 6px;" th:text="${dto?.code}"></span>
					<input type="hidden" name="code" class="formText" th:value="${dto?.code}" />
				</div>-->
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">管理商户：</label>
				<div class="col-sm-8">
					<div id="transferContainer" class="row" style="height: 600px;width: 100%;"></div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">备注：</label>
				<div class="col-sm-8">
					<textarea id="ccomment" name="remark" cols="55" rows="3"
						class="form-control" th:text="${dto?.remark}"></textarea>
				</div>
			</div>
		</form>
	</div>
</div>
</html>